Static Generation (SSG) এবং এর প্রয়োজনীয়তা

Next.js একটি React ফ্রেমওয়ার্ক, যা Static Generation (SSG) ফিচারটি প্রদান করে, যা উন্নত পারফরম্যান্স, SEO এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য অত্যন্ত কার্যকর। Static Generation (SSG) হলো একটি পদ্ধতি যার মাধ্যমে পেজগুলো সার্ভারে রেন্ডার হয়ে স্ট্যাটিক HTML ফাইল হিসেবে তৈরি হয় এবং সেগুলো ক্লায়েন্টে দ্রুত লোড হয়।

এই টেকনিকটি বিশেষ করে ডাইনামিক কনটেন্টের জন্য, SEO ফ্রেন্ডলি এবং দ্রুত লোডিং পেজের জন্য উপকারী। Next.js তে SSG মূলত getStaticProps এবং getStaticPaths ফাংশনের মাধ্যমে বাস্তবায়িত হয়।

Static Generation (SSG) কী?

Static Generation (SSG) হলো একটি পদ্ধতি যেখানে পেজটি বিল্ড টাইমে সার্ভারে রেন্ডার হয় এবং তারপর একটি স্ট্যাটিক HTML ফাইল হিসেবে তৈরি হয়। এটি Server-Side Rendering (SSR) থেকে ভিন্ন, কারণ এখানে পেজটি রেন্ডার হয় যখন অ্যাপ্লিকেশন তৈরি হয়, এবং তখন ক্লায়েন্টের কাছে পাঠানো হয়। এর ফলে পেজটি লোড করতে কোনও সার্ভার-সাইড রেন্ডারিং প্রক্রিয়া প্রয়োজন হয় না, এটি সরাসরি স্ট্যাটিক HTML হিসেবে ব্যবহারকারীকে প্রদর্শিত হয়।

SSG এর প্রক্রিয়া:

1. বিল্ড টাইমে পেজ রেন্ডারিং।
2. তৈরি করা HTML ফাইল স্ট্যাটিক ফাইল হিসেবে সার্ভারে জমা থাকে।
3. ব্যবহারকারী যখন সেই পেজটি অ্যাক্সেস করে, তখন স্ট্যাটিক HTML দ্রুত লোড হয়।

SSG ব্যবহার করে আপনি এমন পেজ তৈরি করতে পারেন যেগুলোর কনটেন্ট পরবর্তীতে পরিবর্তিত হয় না বা খুব কম পরিবর্তিত হয়, যেমন ব্লগ পোষ্ট, প্রোডাক্ট পেজ, ল্যান্ডিং পেজ ইত্যাদি।

SSG এর প্রয়োজনীয়তা

১. দ্রুত লোডিং

Static Generation এর মাধ্যমে তৈরি করা পেজগুলি দ্রুত লোড হয় কারণ এগুলি সার্ভারে প্রি-রেন্ডারড HTML ফাইল হিসেবে থাকে এবং এগুলো সার্ভার থেকে সরাসরি সার্ভ করা হয়। এতে ব্যবহারকারীকে লোডিং টাইম কমে যায় এবং অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত হয়।

২. SEO (Search Engine Optimization) এর জন্য উপকারী

যেহেতু SSG তে পেজগুলো প্রি-রেন্ডার হয়, তাই সার্চ ইঞ্জিন বটগুলির জন্য এটি খুবই উপকারী। সার্চ ইঞ্জিন বট পেজের কনটেন্ট ইন্ডেক্স করতে পারে কারণ এটি স্ট্যাটিক HTML ফাইল হিসেবে সার্ভ করা হয়। এর ফলে SEO র‌্যাঙ্কিং উন্নত হয়।

৩. স্কেলেবিলিটি (Scalability)

Static pages অনেক বেশি স্কেলেবল হয় কারণ সার্ভার প্রতিটি রিকোয়েস্টে পেজটি রেন্ডার না করে সরাসরি HTML ফাইল সার্ভ করে। এর ফলে সার্ভার লোড কমে এবং সিস্টেম বেশি ব্যবহারকারীর জন্য প্রস্তুত থাকে।

৪. নির্ভরযোগ্যতা

Static Generation সার্ভার সাইড রেন্ডারিংয়ের তুলনায় কম ফেইলারের আশঙ্কা সৃষ্টি করে, কারণ সার্ভারে রেন্ডারিংয়ের কোনও প্রয়োজন নেই। প্রতিটি পেজ আগে থেকেই প্রি-রেন্ডার করা থাকে।

Next.js তে Static Generation (SSG) কিভাবে কাজ করে?

Next.js তে SSG সাধারণত getStaticProps এবং getStaticPaths ফাংশনের মাধ্যমে কনফিগার করা হয়।

১. getStaticProps

getStaticProps হলো একটি ফাংশন যা বিল্ড টাইমে রান হয় এবং এটি ডেটা ফেচ করে এবং সেই ডেটা পেজের প্রপস হিসেবে পাস করে। এই ডেটা ফেচ করার সময় পেজটি স্ট্যাটিকভাবে রেন্ডার করা হয় এবং HTML তৈরি হয়। একবার পেজ তৈরি হয়ে গেলে, এটি পরিবর্তিত না হওয়া পর্যন্ত একই HTML ফাইল ব্যবহার করা হয়।

// pages/blog/[id].js

export async function getStaticProps(context) {
  const { id } = context.params;
  
  // API থেকে ডেটা ফেচ করুন
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();
  
  return {
    props: {
      post,
    },
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

এখানে, getStaticProps পেজ লোড হওয়ার সময় ডেটা ফেচ করে এবং সেই ডেটা পেজের প্রপস হিসেবে পাঠায়।

২. getStaticPaths

যখন আপনার ডাইনামিক রাউট (যেমন [id]) থাকে, তখন Next.js কে বলে দিতে হয় কেবল কোন পাথগুলি স্ট্যাটিকভাবে রেন্ডার হবে। এটি getStaticPaths এর মাধ্যমে করা হয়। এই ফাংশনটি আপনি ডাইনামিক রাউট পেজের জন্য ব্যবহার করেন এবং এটি অ্যাসিঙ্ক্রোনাসভাবে স্ট্যাটিক রেন্ডার করার জন্য প্রয়োজনীয় পাথের একটি তালিকা রিটার্ন করে।

// pages/blog/[id].js

export async function getStaticPaths() {
  // API থেকে পোস্টের আইডি গুলি ফেচ করুন
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));
  
  return {
    paths,
    fallback: false,  // fallback: false এর মানে হল যে শুধু নির্দিষ্ট paths গুলোই স্ট্যাটিকভাবে রেন্ডার হবে
  };
}

এখানে, getStaticPaths ফাংশনটি পেজের ডাইনামিক রাউটের জন্য সমস্ত সম্ভাব্য পাথ রিটার্ন করবে এবং সেগুলো স্ট্যাটিকভাবে রেন্ডার হবে।

Static Generation (SSG) এর সুবিধা:

• দ্রুত লোডিং এবং পারফরম্যান্স: পেজগুলো আগে থেকেই তৈরি থাকে, তাই তা দ্রুত লোড হয়।
• SEO-Friendly: সার্চ ইঞ্জিন বট পেজের কনটেন্ট সরাসরি ইন্ডেক্স করতে পারে, যা SEO তে সাহায্য করে।
• স্কেলেবিলিটি: একটি বড় পরিমাণ ভিজিটরের জন্য কম সিস্টেম রিসোর্সে কাজ করতে পারে।

Static Generation এবং অন্যান্য রেন্ডারিং পদ্ধতি তুলনা:

সারাংশ

Static Generation (SSG) একটি অত্যন্ত শক্তিশালী পদ্ধতি যা Next.js এর মাধ্যমে আপনি দ্রুত, SEO ফ্রেন্ডলি, এবং স্কেলেবল পেজ তৈরি করতে পারেন। এটি পেজকে বিল্ড টাইমে স্ট্যাটিক HTML হিসেবে রেন্ডার করে, যার ফলে লোডিং টাইম কমে এবং সার্ভারের উপর চাপ কমে যায়। SSG বিশেষভাবে উপকারী যখন আপনি এমন পেজ তৈরি করতে চান যেগুলোর কনটেন্ট অপরিবর্তিত থাকে বা খুব কম পরিবর্তন হয়।